<!-- 搜索页 -->
<!-- 小吉子 更新于2020.08.23 -->

<!-- 小吉子 更新于2020.08.24 -->
<!-- 修复：1.热搜列表上下对齐
					 2.清空历史记录时历史记录无需显示 -->
<template>
	<view class="search_page">
		<!-- 系统框 -->
		<!-- 用来将页面整体向下顶，给屏幕状态栏留出空间 -->
		<view class="status_bar"></view>
		<!-- 自定义导航栏 -->
		<view class="nav_bar">
			<view class="aside return" @tap="back">
				<text class="inxupt inxupttubiao20"></text>
			</view>
			<view class="message">
				<input type="text" 
					@focus="inputFocus" 
					@confirm="search" 
					@input="inputting"
					confirm-type="搜索"
					v-model="searchText"
					focus="true"
					class="input"
					placeholder="AllSpark工作室" 
					placeholder-style="font-size: 14px"
					maxlength=""/>
				<text class="clear_input" v-show="searchText != ''" @tap="clearInput">×</text>
			</view>
			<view class="aside search" @tap="search(true)">
				<text>搜索</text>
			</view>
		</view>
		<!-- 主界面 -->
		<view class="content_box" v-show="!isResult" :style="'height:' + screenHeight + 'px;'">
			<view class="history_box" v-if="historySearch.length">
				<view class="title_box">
					<text class="title">搜索历史</text><text class="inxupt inxupttubiao21 clear" @tap="clear"></text>
				</view> 
				<view class="history">
					<text class="item" v-for="(item, index) in historySearch" :key="index" :data-text="item" @tap="changeSearchText">
						{{item}}
					</text>
				</view>
			</view>
			<view class="hot_box">
				<view class="title_box">
					<text class="title">热搜</text>
				</view>
				<view class="hot">
					<text class="item" v-for="(item, index) in hotSearch" :key="index" :data-text="item" @tap="changeSearchText">
						{{index+1}}.{{item}}
					</text>
				</view>
			</view>
		</view>
		
		<!-- 搜索结果页面 -->
		<view class="content_box" v-show="isResult">
			<!-- <view class="top-bar"></view> -->
			<!-- 搜索结果导航栏 -->
			<view class="nav">
				<view :class="activeSwiper == 0 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="0"><text>动态</text></view>
				<view :class="activeSwiper == 1 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="1"><text>圈子</text></view>
				<view :class="activeSwiper == 2 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="2"><text>用户</text></view>
			</view>
			<swiper 
				:style="'height:' + swiperItemHeight + 'px;' + 'transition: height 0.5s;'" 
				@change="swiperChange"
				:current="activeSwiper" >
				<!-- 帖子/文章搜索结果 -->
				<swiper-item>
					<view :class="activeSwiper == 0 ? 'page page_active' : 'page'">
						<view v-for='(item,index) in resultList' :key="index" v-if='activeSwiper == 0'>
							<!-- 学术贴摘要 -->
							<AcademicSummary v-if='item.type === 2' :datas="item"></AcademicSummary> 
							<!-- 普通贴摘要 -->
							<PostingsSummary :fromSearch=true v-else-if='item.type === 1' :datas="item"></PostingsSummary>
						</view>	
						<UniLoadMore :status="status" color="#7F7F7F" :contentText="contentText"></UniLoadMore>
					</view>
				</swiper-item>
				<!-- 圈子搜索结果 -->
				<swiper-item>
					<view :class="activeSwiper == 1 ? 'page page_active' : 'page'">
						<CommunitySummary v-if='activeSwiper == 1' v-for='(item,index) in resultList' :key="index" :datas="item"></CommunitySummary>
						<UniLoadMore :status="status" color="#7F7F7F" :contentText="contentText"></UniLoadMore>
					</view>
				</swiper-item>
				<!-- 用户搜索结果 -->
				<swiper-item>
					<view :class="activeSwiper == 2 ? 'page page_active' : 'page'">
						<FansAndFolow v-if='activeSwiper == 2' v-for='(item,index) in resultList' :key="index" :datas="item"></FansAndFolow>
						<UniLoadMore :status="status" color="#7F7F7F" :contentText="contentText"></UniLoadMore>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import AcademicSummary from '../../components/summary/AcademicSummary.vue'
	import PostingsSummary from '../../components/summary/PostingsSummary.vue'
	import FansAndFolow from '../../components/FansAndFollows.vue'
	import CommunitySummary from '../../components/summary/CommunitySummary.vue'
	import UniLoadMore from "../../components/plugins/uni-load-more.vue"
	import { _ajax } from "../../in-xupt-functions.js"
	export default {
		components: {
			AcademicSummary,
			PostingsSummary,
			CommunitySummary,
			FansAndFolow,
			UniLoadMore
		},

		data() {
			return {
				pageNum: 1,
				searchText: '',
				historySearch: [],
				hotSearch: [],
				searchResult: [],
				isResult: false,
				screenHeight: 0,
				status: "more",
				contentText: {
					contentdown: "下拉翻找更多东西",   //loading前的文字显示
					contentrefresh: "正在翻找~~",    //loading中的显示
					contentnomore: "没有东西啦！"    //没有更多的显示
				},
				activeSwiper: 0,
				resultList: [],
				swiperItemHeight: 0,
				urls: [
					'/search/posts?keyWord=',
					'/search/circles?keyWord=',
					'/search/users?keyWord='
				]
			}
		},
		methods: {
			clearInput: function () {
				console.log('清除搜索')
				this.searchText = ''
				this.isResult = false
			},
			inputting: function (e) {
				if(!e.detail.value) {
					this.isResult = false;
				}
			},
			inputFocus: function () {
				if(!this.searchText) {
					this.activeSwiper = 0;
					this.isResult = false;
				}
			},
			swichTab: function (e) {
				this.activeSwiper = e.currentTarget.dataset.index;
			},
			// 当滑动swiper或者点击导航栏上的选择项目时，重新获取swiper高度
			swiperChange: function (data) {
				// 切换swiper时重置状态和请求的页码
				this.status = 'more';
				this.pageNum = 1;
				this.noMore = false;
				this.activeSwiper = data.detail.current;
				// this.getheight(200);
				this.search();
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			// 更新当前swiper高度
			getheight: function(time) {
				setTimeout(() => {
					// 获取当前swiper-item的高度
					let query = uni.createSelectorQuery();
					let page_active = query.select(".page_active");
					page_active.fields({
						size: true
					}, data => {
						// 获取当前设备的高度，取swiper高度为设备高度和swiper-item高度的最大值 （这个方法有bug）
						uni.getSystemInfo({
							success: (data2) => {
								if (data.height <= data2.windowHeight) {
									this.status = 'noMore'
								}
								this.swiperItemHeight = Math.max(data2.windowHeight, data.height);
							}
						})
					}).exec();
				},time)
			},
			loadMore: function() {
				this.status = "loading";
				this.pageNum++;
				_ajax({
					url: this.urls[this.activeSwiper] + this.searchText + '&pageNum=' + this.pageNum,
					method: 'GET'
				})
				.then(res => {
					console.log(res.data)
					if(res.data.data.isLastPage) {
						this.status = 'nomore'
						this.noMore = true
					}else {
						this.status = 'more'
					}
					this.resultList.push(...res.data.data.list)
					this.getheight(500)
				})
				.catch(err => {
					this.pageNum--;
				})
			},
			// 返回上级页面
			back() {
				uni.navigateBack()
			},
			// 搜索
			search(clickButton) {
				if(/^\s*$/.test(this.searchText)) {
					uni.hideKeyboard();
					return
				}
				if (clickButton) {
					this.recordHistory(this.searchText)
				}
				this.resultList = []
				this.status = 'loading'
				var _this = this;
				console.log(_this.swiperItemHeight)
				_ajax({
					url: _this.urls[_this.activeSwiper] + _this.searchText
				})
				.then(res => {
					console.log(res)
					uni.hideLoading()
					_this.isResult = true
					if(res.data.status == 0) {
						_this.resultList.push(...res.data.data.list)
						_this.getheight(500)
						if(_this.resultList.length == 0) {
							_this.contentText.contentnomore = '这里没有东西哦！'
						}else {
							_this.contentText.contentnomore = '没有东西啦！'
						}
					}else {
						this.status = 'nomore'
					}
					
				})
				.catch(err => {
					console.log(err)
					this.noMore = true
				})
			},
			// 清空历史记录
			clear() {
				this.historySearch = []
				// 清空本地记录的历史搜索
				uni.removeStorage({
					key: "historySearch",
					success() {
						this.isResult = false
					}
				})
			},
			// 点击历史记录和热搜进行搜索
			changeSearchText(e) {
				this.searchText = e.currentTarget.dataset.text
				this.search(true)
				this.recordHistory(this.searchText)
			},
			// 记录历史搜索
			recordHistory(text) {
				let index = this.historySearch.indexOf(text,0)
				if(index == -1) {
					this.historySearch.unshift(text)
					if(this.historySearch.length > 6) {
						this.historySearch.pop()
					}
					uni.setStorage({
						key: "historySearch",
						data: this.historySearch,
						success() {
							this.isResult = true
						}
					})
				}else {
					this.historySearch.splice(index,1);
					this.historySearch.unshift(text)
				}
			},
			onLoad() {
				this.getheight(200)
				// 获取本地记录
				this.historySearch = !!uni.getStorageSync('historySearch') ? uni.getStorageSync('historySearch') : [];
				this.screenHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - 50;
				var that = this;
				var defaultHotWord = uni.getStorageSync('horWords');
				if(!defaultHotWord) {
					uni.setStorage({
						key: 'hotWords',
						data: ['纳新','allspark','新生指南']
					})
				}
				_ajax({
					url: '/search/hotWords'
				})
				.then(res => {
					if(res.data.status == 0) {
						that.hotSearch = res.data.data;
						uni.setStorage({
							key: 'hotWords',
							data: res.data.data
						})
					}else {
						that.hotSearch = uni.getStorageSync('hotWords')
					}
					console.log(res)
				})
			},
			onReachBottom: function () {
				if (this.noMore) {
					return
				}else {
					this.loadMore()
				}
			}
		}
	}
</script>

<style lang="less">
.search_page {
	@statusHeight: var(--status-bar-height);
	background-color: @g-background;
	background-color: white;
	height: 100%;
	.status_bar {
		height: @statusHeight;
		width: 100%;
		background-color: #FFFFFF;
		position: fixed;
		top: 0rpx;
		z-index: 2;
	}
	// 自定义顶栏
	.nav_bar {
		position: fixed;
		width: 100%;
		top: @statusHeight;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		z-index: 100;
		background-color: white;
		.aside {
			width: 100rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			
			text {
				display: inline-block;
				width: 90%;
				height: 95%;
				font-size: 14px;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			// flex: 1;
		}
		.return {
			transform: rotate(180deg);
			font-size: 14px;
		}
		.search {
			// font-size: 14px;
			font-weight: 400;
			color: white;
			height: 100%;
			width: 150rpx;
			
			text {
				display: inline-block;
				background-color: #F76B8A;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				font-weight: 400;
				height: 60%;
			}
		}
		.message {
			position: relative;
			flex: 1;
			height: 70%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			border-radius: 50rpx;
			background-color: #F8F8F8;
			.input {
				display: inline-block;
				height: 70%;
				width: 100%;
				padding-left: 14px;
				padding-right: 35px;
				color: #7F7F7F;
				font-size: 14px;
			}
			.clear_input {
				display: block;
				position: absolute;
				right: 10px;
				border-left: 1px solid #ECECEC;
				padding-left: 5px;
			}
		}
	}
	// 主页面
	.content_box {
		margin-top: calc(@statusHeight + 40px);
		// border-top: @statusHeight solid transparent;
		// background-color: @g-background;
		background-color: white;
		// 默认搜索页
		.title_box {
			height: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			
			.title {
				font-weight: bold;
				font-size: 16px;
			}
			.clear {
				display: inline-block;
				font-size: 22px;
			}
		}
		.history_box, .hot_box {
			margin-top: 8rpx;
		}
		.history, .hot {
			display: flex;
			flex-wrap: wrap;
			
			.item {
				display: inline-block;
				// color: #7F7F7F;
				font-size: 14px;
				line-height: 1.3rem;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
			}
		}
		.history {
			.item {
				padding: 3px 10px;
				margin: 3px 10px;
				background-color: @g-background;
				border-radius: 5px;
				max-width: 260rpx;
			}
		}
		.hot {
			justify-content: space-between;
			.item {
				width: 40%;
				margin: 3px;
				padding: 3px 10px;
			}
		}
		
		// 搜索结果页
		.nav {
			position: fixed;
			top: calc(@statusHeight + 50px);
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-wrap: wrap;
			height: 40px;
			width: 100%;
			background-color: #FFFFFF;
			font-size: 32rpx;
			color: @g-gray;
			z-index: 2;
			.listTitle,
			.listTitle_active {
				margin-top: 20rpx;
				line-height: 60rpx;
				// 解决顶部标签显示可能换行的bug
				width: auto;
				text-align: center;
			}
			.listTitle_active {
				// line-height: 60rpx;
				color: #000;
				font-weight: 800;
				border-bottom: 4rpx solid @g-pink;
			}
		}
		swiper {
			color: #000;
			z-index: 0;
			margin-top: calc(@statusHeight + 90px);
		}
		.page {
			width: 100%;
		}
	}
}
</style>
